Progress indicators Guidline 進度指示器指導規則

Usage 用法

進度指示器會顯示當前任務的完成情況，比如在載入程式、提交表格或儲存內容時。它會讓使用者知道當前的狀態，以及是否可以執行某些操作，比如是否可以離開當前頁面。

應用中的每種活動應該僅由一種配置表示。例如，如果某個重新整理操作在一個螢幕上顯示圓形指示器，那麼在所有其他螢幕上進行重新整理操作時，也應使用圓形指示器。

進度指示器分為兩種型別：有確定時間的和無確定時間的。

當我們知道具體需要多長時間時，就用有確定時間的進度指示器。它會準確地顯示完成了多少進度。

當我們不知道具體需要多長時間時，就用無確定時間的進度指示器。這種情況包括：不知道要等多久、載入很快就完成了，或者不需要告訴使用者具體時間。

隨著有關某個程序的更多資訊變得可用，進度指示器可以從不確定狀態變為確定狀態。

Anatomy 結構

Indicator 指示器

這個指示器用來顯示當前的完成進度。它有兩種工作方式：當任務有明確的完成時間時，指示器會根據實際進度來填充軌道。當任務沒有明確的完成時間時，指示器會在軌道上來回移動，不斷變長和變短。直線型的指示器是從前到後移動的，而圓形的指示器則是從頂部開始圍繞軌道轉動。

Track 軌道

軌道顯示進度指示器的全長。僅對於圓形不確定進度指示器，軌道是不可見的。對於所有其他指示器，軌道是可見的。

Stop indicator 停止指示燈

停止指示器是一個小圓點（4dp大小），它出現在有確定時間的直線進度條末端。這個設計是為了讓所有使用者都能更清楚地看到進度條的結束位置。

這個小圓點只用在直線型的進度條上，不會出現在圓形進度條或無確定時間的進度條上。當進度條和它所在的背景顏色太接近（對比度小於3:1）時，必須新增這個小圓點，這樣能幫助使用者更容易看清進度條。

Linear progress indicators線性進度指示器

線性進度指示器透過在一條直線、可見的軌道上動畫顯示進度。

當進度條顯示確定的進度時，指示條會從開始到結束慢慢變長，準確反映當前的完成進度。當進度不確定時，指示條會在軌道上來回伸縮，直到任務完成或者系統知道具體的完成時間。

Placement 放置位置

把進度條放在內容正在載入的區域內。你可以選擇兩個位置：要麼放在區域的中間，要麼放在會展開顯示新內容的邊緣處。當你需要載入多個內容專案時，建議在頁面的頂部放一個進度條，這樣可以顯示所有內容的整體載入進度。

Circular progress indicators圓形進度指示器

圓形進度指示器像鐘錶指標一樣轉動，從0度轉到360度來顯示進度。你可以把它放在各種地方，比如按鈕上或者卡片上。在安卓系統上，“下拉重新整理”手勢會在頁面重新整理時顯示一個圓形進度指示器。

確定式圓形指示器會隨著指示器從 0 度移動到 360 度，用顏色填充可見的圓形軌跡。不確定的圓形指示器在沿著不可見軌跡移動時會改變大小，時而變大，時而變小。

Placement 放置位置

把圓形進度指示器放在載入內容的正中間。如果頁面要載入新的內容，就把進度指示器放在這些新內容將要出現的空白位置上。記住不要讓進度指示器和已有的內容重疊在一起。

Responsive layout 響應式佈局

在從右到左（RTL）的語言中，線性進度指示器應從右向左移動。圓形進度指示器應保持順時針移動。

Interaction & style  互動與樣式

顯示進度的活動指示器與大多數背景顏色之間的視覺對比度至少為 3:1。